<script setup lang="ts">
import { computed } from "vue";
import { storeToRefs } from "pinia";
import { useCacheStore } from "../../../src/sde/cache";
const props = defineProps<{ type: "region" | "system" }>();
const value = defineModel<number>();
const cacheStore = useCacheStore();
const { regions } = storeToRefs(cacheStore);

const placeholder = computed(() => {
  if (props.type === "region") {
    return "请选择星域";
  }
  return "请选择星系";
});
const data = computed(() =>
  regions.value.map((region) => ({
    label: region.name,
    value: region.region_id,
    children:
      props.type === "region"
        ? []
        : region.constellations.map((constellation) => ({
            label: constellation.name,
            value: constellation.constellation_id,
            children: constellation.systems.map((system) => ({
              label: system.name,
              value: system.system_id,
            })),
          })),
  }))
);
</script>

<template>
  <el-tree-select v-model="value" filterable :data="data" :placeholder="placeholder" />
</template>

<style scoped lang="scss"></style>
